<template>
  <div>
    <div v-if="index == 0">
      <LayoutH>
        <template v-slot:title>
          <div class="title">
            <span>分销管理</span>/ <span>作为线路发布方</span>/
            <span>线路管理</span>
          </div>
        </template>
      </LayoutH>
      <div class="layout_right_textcontent">
        <div>
          <span class="circuitbtn" @click="index = 1">新建分销线路</span>
          <span class="circuitbtn lucency">快捷导入</span>
        </div>
        <div id="el-table">
          <el-table :data="tabelData" height="59.64vh" style="width: 97%">
            <el-table-column
              label="线路名"
              style="overflow: hidden"
              width="270"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.route_title }}</span>
              </template>
            </el-table-column>
            <el-table-column label="代理价(元)" width="120">
              <template slot-scope="scope">
                <span>{{ scope.row.agency_price }}</span>
              </template>
            </el-table-column>
            <el-table-column label="渠道销量" width="100">
              <template slot-scope="scope">
                <span>{{ scope.row.channel_sales }}</span>
              </template>
            </el-table-column>
            <el-table-column label="渠道销售总额" width="130">
              <template slot-scope="scope">
                <span>{{ scope.row.total_channel_sales }}</span>
              </template>
            </el-table-column>
            <el-table-column label="状态" width="100">
              <template slot-scope="scope">
                <span>{{ scope.row.status_text }}</span>
              </template>
            </el-table-column>
            <el-table-column label="开放分销申请" width="170">
              <template slot-scope="scope">
                <el-switch
                  v-if="scope.row.status == 1"
                  :value="false"
                  :active-value="1"
                  :inactive-value="0"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                >
                </el-switch>
                <el-switch
                  v-if="scope.row.status != 1"
                  v-model="scope.row.is_open_application"
                  :active-value="1"
                  :inactive-value="0"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  @change="is_open(scope.row)"
                >
                </el-switch>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <!-- 详情 -->
                <span
                  class="green"
                  v-if="scope.row.status == 2 || scope.row.status == 3"
                  @click="goDetails(scope.row)"
                  >详情</span
                >
                <!-- 编辑 -->
                <span class="green" v-if="scope.row.status == 2">编辑</span>

                <!-- 上架 -->
                <span
                  class="green"
                  v-if="scope.row.status == 2"
                  @click="(putaway = true), (submit = true), (id = scope.row)"
                  >上架</span
                >
                <!-- 下架 -->
                <span
                  class="green"
                  v-if="scope.row.status == 3"
                  @click="(putaway = true), (submit = true), (id = scope.row)"
                  >下架</span
                >
                <span class="green" v-if="scope.row.status == 1">--</span>
                <span class="green" v-if="scope.row.status == 4">编辑</span>
                <span
                  class="green"
                  @click="deleteEle(scope.row.route_service_id)"
                  v-if="scope.row.status == 4 || scope.row.status == 2"
                  >删除</span
                >
              </template>
            </el-table-column>
          </el-table>
        </div>

        <div style="margin-top: 3vh">
          <el-pagination
            background
            hide-on-single-page
            @current-change="currentChange"
            layout="prev, pager, next"
            :total="total_count"
            :current-page="pagedata.page_no"
          >
          </el-pagination>
        </div>
      </div>
    </div>

    <div class="districircuit" v-if="index == 1">
      <!-- 发布线路 -->
      <SetCircuit
        v-on:setCiruitdata="getcircuitdata"
        ref="circuit"
        :index="index"
        v-on:indexChange="indexchange($event)"
      >
        <template v-slot:circuit-header>
          <span class="title">分销管理</span>/
          <span class="title">作为线路发布方</span>/
          <span class="title">线路管理</span>
        </template>
        <!-- 市场价格 -->
        <template v-slot:patch_1>
          <div>
            <span>代理价:</span>
            <input type="number" v-model="money.money_proxy" />
          </div>
        </template>

        <template v-slot:patch_2>
          <div class="huanwei">
            <span style="right: 0" class="switch">市场参考价:</span>
            <input type="number" v-model="money.market_price" />
          </div>
        </template>

        <!-- 第三方导游 -->
        <template v-slot:patch_3>
          <div>
            <span style="right: 0" class="switch">第三方导游成本:</span>
            <el-popover
              placement="top-start"
              title="关于第三方导游成本"
              width="400"
              trigger="hover"
              content="如开放第三方导游，平台内其他导游将可申请独立带团，用户参团时即可挑选专属导游陪伴出行，由于额外加入的导游可能占一定的交通、食宿名额，产生额外成本，请根据实际情况填写导游成本，该部分金额将结算到本线路收入。"
            >
              <i slot="reference" style="display: block" class="question"></i>
            </el-popover>
            <input
              class="margin-left"
              v-model="money.other_guide_cost"
              type="number"
              placeholder="元/人"
            />
          </div>
        </template>

        <template v-slot:content2_header>
          <div>
            <span>详情</span>
          </div>
        </template>

        <template v-slot:submitslot>
          <!-- 确认提交 -->
          <div v-show="submit" class="setsubmit">
            <p>确认提交</p>
            <span>线路提交后，需审核通过后才能正</span>
            <div>
              <span> 常上架，确认编辑无误并提交？</span>
            </div>
            <div>
              <el-switch
                v-model="setCiruit.auto_in_operation"
                :active-value="1"
                :inactive-value="0"
                active-color="#13ce66"
                inactive-color="#ff4949"
              >
              </el-switch>
              <span>审核通过后自动上架</span>
            </div>
            <div>
              <span @click="cancel">取消</span>
              <span @click="showpublic">提交</span>
            </div>
          </div>
        </template>
      </SetCircuit>
    </div>

    <!-- 背景遮蔽层 -->
    <div v-show="submit" class="background"></div>

    <!-- 确认弹窗 -->
    <div v-if="putaway" class="absolute upputaway">
      <p v-if="id.status == 2" class="abs_text">确认上架</p>
      <p v-if="id.status == 3" class="abs_text">确认下架</p>
      <div class="checkbox">
        <span @click="(putaway = false), (submit = false)">取消</span>
        <!-- 触发下架 -->
        <span
          v-if="id.status == 3"
          @click="setdirstrioff(id), (putaway = false), (submit = false)"
          >确认</span
        >
        <!-- 触发上架 -->
        <span
          v-if="id.status == 2"
          @click="setdistrion(id), (putaway = false), (submit = false)"
          >确认</span
        >
      </div>
    </div>
  </div>
</template>

<script>
import LayoutH from "@/components/Layoutheader.vue";
import SetCircuit from "@/components/SetCircuit.vue";
import distriContrl from "@/mixins/distri/distripublic.js";
import { getdistricircuit } from "@/utils/method.js";
import distriDetailsfun from "@/mixins/distri/distriDetails.js"; // 数据呈现的方法

export default {
  components: { LayoutH, SetCircuit },
  mixins: [distriContrl, distriDetailsfun],
  beforeMount() {
    // 获取每页数据
    getdistricircuit(this.pagedata)
      .then((res) => {
        // console.log(res);
        this.tabelData = res.data.data.data;
        this.total_count = res.data.data.total_count;
        // console.log(this.tabelData);
      })
      .catch((error) => {
        console.log(error);
        this.$message.error(error.data.msg);
      });
  },
  data() {
    return {
      index: 0,
      submit: false,
      putaway: false, // 下架
      id: 0, // 上架使用的id状态
      tabelData: [],
      setCiruit: {
        auto_in_operation: 1,
      },
      total_count: 0,
      money: {
        money_proxy: "",
        market_price: "",
        other_guide_cost: "",
      },
      // 每页的参数
      pagedata: {
        page_no: 1,
        page_size: 10,
      },
    };
  },
};
</script>

<style lang='less'>
.layout_right_textcontent {
  height: 80vh;
  > div:first-child:not(.margin-b) {
    margin-bottom: 1.6vh !important;
    text-align: left;
  }
}
.districircuit .circuit-body > div:nth-child(3) > div,
.districircuit .circuit-body > div:nth-child(3) > div.simple-view > div {
  text-align: left;
  width: 18vw;
  margin-bottom: 1vh;
}

.districircuit {
  .button {
    font-weight: 400 !important;
    font-size: 16px;
  }
  .circuit-body > div:nth-child(1) > div.text span {
    position: relative;
    right: 0.18vw;
    font-size: 13px;
    width: 50% !important;
  }
  .circuit-body > div:nth-child(1) > div i.question {
    display: none;
  }

  // 中间控件
  .circuit-body > div:nth-child(3) .controller {
    position: absolute;
    bottom: 0;
    box-shadow: 0px 3px 6px rgb(0 0 0 / 16%);
    border-radius: 0px 0px 4px 4px;
    background-color: #ffffff;
    width: 98%;
    margin: 0.5vh auto;
  }
}

// 详情文案
.districircuit .circuit-body div.text_area textarea {
  width: 93.4%;
}
.districircuit .circuit-box {
  margin-top: -0.1vh;
  padding-right: 2vw;
  border-top: 1px solid #ccc;
  width: 83vw;
  height: 95vh;
  box-sizing: border-box;
  .circuit-head {
    .title {
      span {
        font-weight: 550;
        margin: 0.5vw;
        border: none;
      }
    }
  }
}
</style>